<div class="row">
    <div class="col-sm-7">
        <h1 class="pagetitle" translate lib="web">customer</h1>
    </div>
</div>

<div class="row"
    ng-show="ctrl.WebSocketClientService.customer == null && menuctrl.WebSocketClientService.stripe_api_key && menuctrl.WebSocketClientService.stripe_api_key != ''">
    <div class="col-sm-7">
        To enable multitenancy (multiple users and roles) fill out company name and click save.<br>
        <small><strong>If users and roles does not appear in the side menu after clicking save, please reload your browser</strong></small>

    </div>
</div>
<!-- <div class="row"
    ng-show="ctrl.WebSocketClientService.customer != null && menuctrl.WebSocketClientService.stripe_api_key && menuctrl.WebSocketClientService.stripe_api_key != '' && (ctrl.WebSocketClientService.customer.stripeid == '' || ctrl.WebSocketClientService.customer.stripeid == null) ">
    <div class="col-sm-7">
        To allow purchase a valid TAX/VAT number is mandatory<br><br>
    </div>
</div> -->


<pre ng-show="ErrorMessage!=null">{{ ErrorMessage }}</pre>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>

<form ng-submit="ctrl.submit()" class="form-horizontal" role="form" autocomplete="off">

    <div class="form-row row-eq-spacing-sm">
        <div class="col-sm">
            <label for="name" class="required">company name</label>
            <input type="text" class="form-control" id="name" placeholder="Company name" required="required"
                ng-model="ctrl.model.name" ng-disabled="ctrl.loading==true">
        </div>
        <div class="col-sm" ng-show="ctrl.model.vattype && ctrl.model.vattype != ''">
            <label for="country" class="required">country</label>
            <div>
                <br>
                {{ctrl.model.country}}
            </div>
        </div>
    </div>
    <div class="form-row row-eq-spacing-sm" ng-show="ctrl.model.vattype && ctrl.model.vattype != ''">
        <div class="col-sm">
            <label for="vattype" class="required">vat type</label><br />
            {{ctrl.model.vattype}}
        </div>
        <div class="col-sm">
            <label for="vatnumber" class="required">TAX/VAT ID</label><br />
            {{ctrl.model.vatnumber}}
        </div>
    </div>
    <div class="form-row row-eq-spacing-sm" ng-show="menuctrl.WebSocketClientService.llmchat_queue != null && menuctrl.WebSocketClientService.llmchat_queue != ''">
        <div class="col-sm">
            <label for="vattype" class="required">opanai key</label><br />
            <input type="text" class="form-control" id="openaikey" placeholder="openai key"
                ng-model="ctrl.model.openaikey" ng-disabled="ctrl.loading==true">
        </div>
    </div>
    <div class="row" ng-show="ctrl.model.domains.length > 0">
        <div class="col-sm-7">
            Forced domains<br>
        </div>
    </div>
    <div class="form-group" ng-repeat="id in ctrl.model.domains">
        <div class="col-sm-4">
            {{ id }}
            <button type="button" ng-disabled="ctrl.loading==true" class="btn btn-danger" ng-click="ctrl.deletedomain(id)"
                ng-show="menuctrl.hasrole('admins') && ctrl.loading==false"
                translate lib="web">delete</button>
        </div>
    </div>
    
    <div class="form-inline" ng-show="menuctrl.hasrole('admins')">
        <div class="form-group mx-sm-3 mb-2">
            <input ng-model="ctrl.newdomain" type="text" class="form-control" placeholder="New force domain"
                autocomplete="new-password">
        </div>
        <button type="button" class="btn btn-success mb-2" ng-disabled="ctrl.loading==true" ng-click="ctrl.adddomain()">add
            domain</button>
    </div>
    
    <div class="form-row row-eq-spacing-sm" ng-show=" ctrl.loading==false">
        <div class="col-sm">
        </div>
        <div class="col-sm">
            <br> <button type="submit" ng-disabled="ctrl.loading==true" class="btn btn-success" translate lib="web">
                Save</button>

            <button ng-click="ctrl.AddHours(support)" ng-repeat="support in ctrl.support"
                ng-disabled="ctrl.loading==true" ng-show="menuctrl.hasrole('admins') && ctrl.loading==false"
                class="btn btn-secondary" translate lib="web">
                Add hours({{ support.product.name }})</button>
        </div>
    </div>

    <div class="form-row row-eq-spacing-sm"
        ng-show="ctrl.model.stripeid && ctrl.model.stripeid != '' && (menuctrl.hasrole('admins') || menuctrl.hasrole('customer admins'))">
        <div class="col-sm">
            <label for="vatnumber">billing portal</label>
            <button type="button" ng-click="ctrl.OpenPortal()" ng-disabled="ctrl.loading==true" class="btn btn-success"
                translate lib="web">Portal</button>
        </div>
        <div class="col-sm">
            <label for="vatnumber">Next Invoice</label>
            <button type="button" ng-click="ctrl.NextInvoice()" ng-disabled="ctrl.loading==true" class="btn btn-success"
                translate lib="web">Next Invoice</button>
        </div>

    </div>

</form>

<div ng-show="ctrl.model.dbusage || WebSocketClientService.user.dbusage">
    Current database usage:
    <format-bytes ng-model="ctrl.model.dbusage" decimal=0 ng-show="ctrl.model.dbusage" />
    <format-bytes ng-model="WebSocketClientService.user.dbusage" decimal=0 ng-show="!ctrl.model.dbusage" />
</div>
<div class="row" ng-show="ctrl.ShowPlans() && ctrl.Resources.length > 0">
    <div class="col-sm-7">
        <h4>Buy/manage company plans</h4><br><br>
    </div>
</div>
<!-- add light gray background to even rows -->
<style>
    bg-light:nth-child(even) {
        background-color: #f8f9fa !important;
    }
</style>
<div ng-repeat="Resource in ctrl.Resources | orderBy: 'order'" ng-show="ctrl.ShowPlans() && ctrl.Resources.length > 0"
    >

    <div class="row" ng-show="Resource.customerassign == 'singlevariant'" ng-class="{'bg-light': $odd}">
        <div class="col">
            {{Resource.name}} :
            <format-bytes ng-model="ctrl.model.dbusage" decimal=0 ng-show="Resource.name == 'Database Usage'" />
        </div>

        <div class="col">
            <select ng-model="Resource.newproduct"
                ng-options="item as item.name for item in Resource.products | orderBy: 'order'"
                ng-disabled="ctrl.loading==true">
            </select>
        </div>
        <div class="col">
            {{Resource.newproduct.count}}
            <span ng-show="Resource.name == 'Database Usage' && Resource.newproduct.customerassign == 'metered'"> /
                aprox: {{Resource.newproduct.packagecount}}</span>
        </div>
        <div class="col">
            <a href ng-click="ctrl.AddPlan(Resource, Resource.newproduct)" class="btn" role="button"
                ng-show="(Resource.newproduct.count == 0 || Resource.newproduct.customerassign == 'multiple') && ctrl.loading==false">
                <em class="fas fa-money-bill-wave"></em></a>
            <em class="fas fa-money-bill-wave disabled btn"
                ng-show="(Resource.newproduct.count > 0 && Resource.newproduct.customerassign != 'multiple') || Resource.newproduct == null || ctrl.loading==true"></em>
            <a href ng-click="ctrl.RemovePlan(Resource, Resource.newproduct)" class="btn" role="button"
                ng-show="Resource.newproduct.count > 0 && ctrl.loading==false">
                <em class="fas fa-trash"></em></a>
            <em class="fas fa-trash disabled btn"
                ng-show="(Resource.newproduct.count == 0) || Resource.newproduct == null || ctrl.loading==true"></em>

        </div>
    </div>
</div>
<div ng-repeat="Resource in ctrl.Resources | orderBy: 'order'" ng-show="ctrl.ShowPlans() && ctrl.Resources.length > 0"
    >
    <div class="row" ng-repeat="Product in Resource.products | orderBy: 'order'"
        ng-class="{'bg-warning': Product.count > 0, 'bg-light': $even}"
        ng-show="Resource.customerassign == 'multiplevariants'">
        <div class="col">{{Product.name}}</div>
        <div class="col">

        </div>
        <div class="col">
            {{ Product.count }}
            <span ng-show="Product.usedby && Product.usedby > 0" > / {{Product.usedby}} used</spamn></spa>
        </div>

        <div class="col">

            <a href ng-click="ctrl.AddPlan(Resource, Product)" class="btn" role="button"
                ng-disabled="ctrl.loading==true" ng-show="Product.count == 0 || Product.customerassign == 'multiple'">
                <em class="fas fa-money-bill-wave"></em></a>
            <a href ng-click="ctrl.RemovePlan(Resource, Product)" class="btn" role="button" ng-show="Product.count > 0"
                ng-disabled="ctrl.loading==true">
                <em class="fas fa-trash"></em></a>

        </div>
    </div>
</div>


<div ng-if="ctrl.licenses.length > 0">
    <h4>Issue new license for </h4>
    <div ng-repeat="license in ctrl.licenses"
    ng-disabled="ctrl.loading==true" ng-show="ctrl.loading==false"
    >
        <button ng-click="ctrl.IssueLicense(domain, ctrl.months)" ng-repeat="domain in license.domains"
        ng-disabled="ctrl.loading==true" ng-show="ctrl.loading==false"
        class="btn btn-success" translate lib="web">
        {{ domain }}
        </button><br>
    </div><br>
    <input type="text" ng-model="ctrl.domain" ng-show="menuctrl.hasrole('admins')"><input type="number" ng-model="ctrl.months" ng-show="menuctrl.hasrole('admins')"><button ng-click="ctrl.IssueLicense(ctrl.domain, ctrl.months)" 
    ng-disabled="ctrl.loading==true" ng-show="ctrl.loading==false" class="btn btn-success" translate lib="web">Issue</button>
    <textarea ng-if="ctrl.licensekey != ''" ng-model="ctrl.licensekey" rows="5" cols="100" readonly="readonly"></textarea>
    <textarea ng-if="ctrl.licensekeydecoded != ''" ng-model="ctrl.licensekeydecoded" rows="5" cols="100" readonly="readonly"></textarea>
</div>


<div class="row" ng-show="ctrl.ShowPlans()">
    <div class="col-sm-7">
        <h4>Buy/manage user plans <a href="#/Users">here</a></h4><br><br>
    </div>
</div>


<div ng-repeat="Resource in ctrl.UserResources | orderBy: 'order'" ng-show="ctrl.ShowPlans()">
    <div ng-show="Product.count > 0">
        <strong>{{Resource.name}}</strong>
    </div>
    <div class="row" ng-repeat="Product in Resource.products | orderBy: 'order'" ng-show="Product.count > 0">
        <div class="col">{{Product.name}}</div>
        <div class="col">{{ Product.count }}</div>
    </div>
</div>




<div class="modal modal-full" id="NextInvoiceModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <a href="#" class="close" role="button" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </a>
            <h5 class="modal-title" ng-show="!ctrl.proration">Next Invoice for
                {{ctrl.WebSocketClientService.customer.name}}</h5>
            <h5 class="modal-title" ng-show="ctrl.proration">Accept next Invoice for
                {{ctrl.WebSocketClientService.customer.name}}</h5>
            <h6>{{ ctrl.period_start }} to {{ ctrl.period_end }}</h6>
            <p>
            <div class="row" ng-repeat="line in ctrl.nextinvoice.lines.data">
                <div class="col">{{line.description}}</div>
                <div class="col">{{ line.quantity }}</div>
                <div class="col">{{ line.amount / 100 }} {{ line.currency }}</div>
            </div>
            <hr
                ng-show="(ctrl.nextinvoice.tax && ctrl.nextinvoice.tax > 0) || (ctrl.nextinvoice.total_discount_amounts && ctrl.nextinvoice.total_discount_amounts.length > 0)">
            <div class="row" ng-repeat="item in ctrl.nextinvoice.total_discount_amounts">
                <div class="col">Discount</div>
                <div class="col"></div>
                <div class="col">{{ item.amount / 100 }} {{ ctrl.nextinvoice.currency }}</div>
            </div>
            <div class="row" ng-show="ctrl.nextinvoice.tax && ctrl.nextinvoice.tax > 0">
                <div class="col">Tax</div>
                <div class="col"></div>
                <div class="col">{{ ctrl.nextinvoice.tax / 100 }} {{ ctrl.nextinvoice.currency }}</div>
            </div>
            <hr>
            <div class="row">
                <div class="col">Total</div>
                <div class="col"></div>
                <div class="col">{{ ctrl.nextinvoice.amount_due / 100 }} {{ ctrl.nextinvoice.currency }}</div>
            </div>
            </p>
            <div class="text-right mt-20">

                <a href ng-show="ctrl.proration" class="btn mr-5 btn-success" role="button"
                    ng-click="ctrl.AddPlan2()">Accept</a>
                <a href class="btn mr-5" role="button" ng-click="ctrl.ToggleNextInvoiceModal()">Close</a>
            </div>
        </div>
    </div>
</div>
<div>
    <br />
    <br />
    <br />
</div>
